<template>
	<div class="notice-wrap" >
		<van-nav-bar
		  title="官方公告"
		  left-arrow
		  fixed
		  @click-left="onClickLeft"
		/>
		
		<van-list
		  v-model="loadingPage"
		  :finished="finished"
		  :finished-text="list.length ? '没有更多了' : ''"
		  @load="init"
		>
		
			<div v-if="finished && !list.length" class="empty-notice" >
				<van-empty description="暂无官方公告" />
			</div>
			
			<div v-else class="notice-ul" >
				<div 
				v-for="(item, index) in list"
				:key="index"
				@click="handleToInfo(item)"
				class="notice-li" >
					<div class="notice-name" >{{ item.title }}</div>
					<div class="notice-content" v-html="item.content" ></div>
					<div class="notice-time" >{{ item.publish_time }}</div>
				</div>
			</div>
		
		</van-list>
		
		
	</div>
</template>

<script>
	import { NOTICE_LIST } from '@/api/home';
	export default {
		data() {
			return {
				// 分页
				page: 1,
				pageSize: 20,
				list: [],
				loadingPage: false,
				finished: false,
			}
		},
		methods: {
			onClickLeft() {
				this.$router.back()
			},
			handleToInfo(item) {
				localStorage.setItem('noticeInfo', JSON.stringify(item));
				this.$router.push({
					name: 'noticeInfo'
				})
			},
			init() {
				let params = {};
				params['page_num'] = this.page;
				params['page_size'] = this.pageSize;
				
				this.$http.get(NOTICE_LIST, {
				  params
				})
				.then(res => {
				  const {
				    list
				  } = res.data;
				
				  if(list && list.length) {
				     this.page++;
				     this.list = this.list.concat(list);
				     // 加载状态结束
				     this.loadingPage = false;
				     if(list.length < this.pageSize) {
				      this.finished = true;
				     }
				  }else {
				    this.finished = true;
				  }
				})
			}
		}
	}
</script>

<style lang="scss" >
	.notice-wrap{
		min-height: 100vh;
		padding-top: 46px;
		background-color: #F5F5F5;
		box-sizing: border-box;
		.van-nav-bar .van-icon{
			color: #333333;
		}
		.van-nav-bar__arrow{
			font-size: 20px;
		}
		.empty-notice{
			padding-top: 1rem;
		}
		.notice-ul{
			.notice-li{
				padding: 0.24rem 0.32rem;
				margin-bottom: 0.16rem;
				background-color: #ffffff;
				.notice-name{
					margin-bottom: 0.16rem;
					line-height: 0.44rem;
					font-weight: 500;
					font-size: 0.32rem;
					color: #333333;
				}
				.notice-content{
					margin-bottom: 0.16rem;
					line-height: 0.34rem;
					font-weight: 400;
					font-size: 0.24rem;
					color: #999999;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				.notice-time{
					height: 0.34rem;
					line-height: 0.34rem;
					font-size: 0.24rem;
					font-weight: 400;
					color: #c3c3c3;
				}
			}
		}
	}
</style>